<template>
	<view>
		<view class="header">
			<view class="header-con">
				<view class="header-input-container">
					<input type="text" v-model="keywords" placeholder="请输入关键字" placeholder-style="color:#999999;font-size:28rpx;text-align:center"/>
					<image src="../../static/images/search.png" @tap="gosearch()" style="z-index: 1000;"></image>
				</view>
			</view>
		</view>
		<view class="tab-kuang uni-row border-bottom">
			<view class="tab-item" :class="{'tab-item-active':index==flag}" v-for="(item,index) in tab" :key="index" @tap="change(index)">
				{{item}}
			</view>
		</view>
		<view style="font-size: 30rpx;padding-left: 20rpx;line-height: 60rpx;">
			搜索记录
			<text style="float: right;margin-right: 32rpx;" @tap="clear()">清除记录</text>
		</view>
		<view style="padding: 0px 32rpx 0px 32rpx;">
			<text class="jilu-item" v-for="(item,index) in jilu" :key="index" @tap="go(index)">{{item.key}}</text>
		</view>
	</view>
</template>

<script>
	import {getlogin} from "@/static/js/login.js";
	import {timestampToDate1} from "@/static/js/login.js"
	import httpPath from '@/static/js/path.js';
	export default {
			data() {
				return {
				    tab:["嗨啤","酒吧","嗨啤说"],
					flag:0,
					keywords:"",
					jilu:[]
				}
			},
			onLoad(option) {
				let ss = uni.getStorageSync('keys');
				if(ss!=""&&ss!=null){
					console.log(ss)
					this.jilu=ss
				}
			},
			methods: {
				go(index){
					this.keywords=this.jilu[index].key;
					if(this.flag==0){
						uni.navigateTo({
							url:"goodslist?keywords="+this.keywords
						})
					}else if(this.flag==1){
					
						uni.navigateTo({
							url:"searchbar?keywords="+this.keywords
						})
					
					}else if(this.flag==2){
						
						uni.navigateTo({
							url:"/pages/index/newslist?keywords="+this.keywords
						})
					}
				},
				clear(){
					let $this=this;
					uni.removeStorage({
					    key: 'keys',
					    success: function (res) {
					        $this.jilu=[];
					    }
					});
				},
				change(index){
				
					this.flag=index;
				},
				gosearch(){
					if(this.keywords){
						let issame=false;
						for(let i=0;i<this.jilu.length;i++){
							if(this.keywords==this.jilu[i].key){
							    issame=true;
								break;
							}
						}
						if(!issame){
							this.jilu.push({key:this.keywords,type:this.flag});
						}
						
						uni.setStorage({
							key: 'keys',
							data: this.jilu,
							success: function() {}
						});
						if(this.flag==0){
							uni.navigateTo({
								url:"goodslist?keywords="+this.keywords
							})
						}else if(this.flag==1){
						
							uni.navigateTo({
								url:"searchbar?keywords="+this.keywords
							})
						
						}else if(this.flag==2){
							
							uni.navigateTo({
								url:"/pages/index/newslist?keywords="+this.keywords
							})
						}
					}else{
						uni.showModal({
							content:"请输入搜索关键字"
						})
					}
				}
			  
			}
		}
</script>

<style>
	.jilu-item{padding:5rpx 20rpx;font-size: 28rpx;color: #666666;height: 80rpx;line-height: 80rpx;background: #CCCCCC;border-radius: 40rpx;margin: 10rpx;}
	.tab-item-active{border-bottom: 2px solid #38D180;}
	.tab-item{box-sizing:border-box;height: 90rpx;width: 33.3%;font-size: 30rpx;line-height: 90rpx;text-align: center;}
	.header{height:85rpx;background: #333;padding-top: 16rpx;}
	.header-input-container{width: 686rpx;margin:auto;height: 57rpx;border-radius: 30rpx;position: relative;background: #fff;}
	.header-input-container input{width: 100%;height: 100%;padding-left: 20rpx;background: #fff;border: none;border-radius: 30rpx;}
	.header-input-container image{width:29rpx ;height:36rpx ;position: absolute;top:10rpx ;right: 20rpx;}
</style>
